@extends('layouts.app')

@section('content')

    <div id="app">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">增加管理员</div>

                <div class="panel-body">
                    <form class="form-inline" action="{{ url('/admin/permission/admin') }}" method="post">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <label>管理员学号：</label>
                            <input type="text" class="form-control" name="number">
                        </div>
                        <div class="form-group">
                            <label>密码：</label>
                            <input type="password" class="form-control" name="password">
                        </div>
                        <button type="submit" class="btn btn-primary">增加</button>
                    </form>


                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">管理员列表</div>

                <div class="panel-body">

                    @if($admins->count() > 0)
                    <table class="table">
                        <thead>
                        <tr>
                            <th>id</th>
                            <td>学号</td>
                            <td>姓名</td>
                            <td>角色</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody>
                            @foreach($admins as $admin)
                                <tr>
                                    <th>{{ $admin->id }}</th>
                                    <td>{{ $admin->number }}</td>
                                    <td>{{ $admin->user->name }}</td>
                                    <td>{{ implode(',', $admin->roles->pluck('display_name')->all()) }}</td>
                                    <td>
                                        @permission(('admin_delete'))
                                        <form action="{{ url('/admin/permission/admin', $admin->id) }}" id="permission-delete-{{ $admin->id }}" method="post">
                                            {{ csrf_field() }}
                                            {{ method_field('DELETE') }}
                                        </form>
                                        <button class="btn btn-danger btn-sm" onclick="document.getElementById('permission-delete-{{ $admin->id }}').submit();">删除</button>
                                        @endpermission
                                        @permission(('admin_role_setting'))
                                        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#roleModal" v-on:click="getRole('{{ $admin->id }}', '{{ $admin->user->name }}')">设置角色</button>
                                        @endpermission
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @endif

                </div>
            </div>
        </div>

        <div class="modal fade" id="roleModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">设置 @{{ title }} 管理员</h4>
                    </div>
                    <div class="modal-body">
                        <template v-if="!modalLoading">
                            @if($roles)
                                @foreach($roles as $role)
                                    <label style="margin: 0 5px"><input type="checkbox" v-model="role_id" value="{{ $role->id }}"> {{ $role->display_name }}</label>
                                @endforeach
                            @endif
                        </template>
                        <p v-else>加载中...</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="modal_close" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="modal_ok" v-on:click="updateUserRole()" data-loading-text="保存中..." autocomplete="off">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
@endsection

@section('js')
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                title: '',
                role_id: [],
                modalLoading: false,
                admin_id: 0
            },
            methods: {
                getRole: function(id, name){
                    this.admin_id = id;
                    this.title = name;
                    this.modalLoading = true;
                    this.role_id = [];
                    this.$http.get('{{ url('admin/permission/role-user') }}/' + id).then(function(response){
                        app.role_id = response.data;
                        app.modalLoading = false;
                    });
                },
                updateUserRole: function(){
                    var $btn = $("#modal_ok").button('loading');
                    this.$http.post('{{ url('admin/permission/role-user') }}/' + this.admin_id, {role_id: this.role_id, _method: 'PUT'}).then(function(response){
                        $btn.button('reset')
                        document.getElementById('modal_close').click();
                        location.reload();
                    });
                }
            }
        })
    </script>
@endsection